<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<p>zheshigep</p>
	<button>这是button</button>

	<script type="text/javascript">
		/*
			两种方法:
				1.----on**** 传统写法 on + 事件类型 on click on mouseup
				特点： 添加的时间具有唯一性，同一个元素同一个事件只能设置一个函数

				2.addEventListener(event , function)
				特点： 同一个元素，同一个事件类型可以绑定多个，并且按照顺序执行
					event:事件名 click mouseup monsedown 不加on
					function: 触发事件后执行的方法
					布尔值: 不必填
						默认 false 表示冒泡阶段处理函数
						true 事件捕获阶段处理函数
		*/
		let p = document.querySelector('p')
		// p.onclick = function(){
		// 	console.log("第一个onclick")
		// }
		// p.onclick = function(){
		// 	console.log("第二个onclick")
		// }
		function fn(){
			console.log("第二个addEventListener")
		}
		p.addEventListener('click' , function(){
			console.log("第一个addEventListener")
		})
		p.addEventListener('click', fn, true)

		// 解绑事件
		let btn = document.querySelector("button")
		btn.addEventListener("click", function(){
			//  只能移除命名函数，匿名函数不能移除
			p.removeEventListener('click', fn, true)
		})
	</script>
</body>
</html>